<template>
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部(20)</text>
				<text>降价(4)</text>
				<text>常卖(2)</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox color="#FF6040" value="true" />
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>

		<view class="container">
			<view class="top">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item, index) in cartList" :key="item.id">
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<checkbox-group><checkbox color="#FF6040" :checked="item.isTrue" value="1" @click="checkOne" :data-index="index" /></checkbox-group>

								<!-- <switch type="checkbox" :checked="true"  color="#ff6040" /> -->
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common"><image :src="$url + item.img" mode="widthFix"></image></view>

							<!-- 信息 -->
							<view class="cartInfo_info">
								<label style="font-size: 32rpx;">{{ item.goodsname }}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥200</label>
								<label style="color:#FF6040;">
									￥
									<text style="font-size: 40rpx;color:#FF6040;">{{ item.price }}</text>
									<text>￥{{ item.price + 200 }}</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child" @click="changeNum" :id="item.id">
									<label data-index="1">－</label>
									<label>{{ item.num }}</label>
									<label data-index="2">＋</label>
								</view>
							</view>
						</view>
					</view>
					<view class="cartDel" id="demo2" @click="del" :id="item.id" :data-index="index"><label for="">删除</label></view>
				</scroll-view>
			</view>

			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<!-- <checkbox-group @change="changeAll"><checkbox color="#FF6040" value="1" :checked="checkAll" /></checkbox-group> -->
					<switch type="checkbox" @change="changeAll" :checked="checkAll" color="#ff6040" />
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">
						合计：
						<label style="color: #FF6040;">￥ {{ sum }}</label>
					</view>
					<label class="footd2sp2">不含运费，已优惠￥{{ 200 * num }}</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity" @click="submit">
					<!-- 被选中的商品的个数 -->
					<label>去结算({{ num }}件)</label>
				</view>
			</view>
		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else><cartnull /></view>
</template>

<script>
// 引入数据为空提示组件
import cartnull from '@/components/cartnull/cartnull.vue';
export default {
	components: { cartnull },
	data() {
		return {
			cartList: [], //初始化购物车数据
			buffer: true, //检测购物车是否有数据
			checkAll: false,
			payList: [] //要结算的商品
		};
	},
	// onLaunch() {
	// 	this.$http({
	// 		url: 'cartlist',
	// 		data: {
	// 			uid: uni.getStorageSync('userInfo').uid
	// 		}
	// 	}).then(res => {
	// 		if (res.list.length == 0) {
	// 			this.buffer = false;
	// 		} else {
	// 			res.list.forEach(item => {
	// 				item.isTrue = false;
	// 			});
	// 			// console.log(res.list);
	// 			this.cartList = res.list;
	// 		}
	// 	});
	// },
	// 页面显示时
	onShow() {
		if (!uni.getStorageSync('userInfo')) {
			this.$tip.login();
		} else {
			this.$http({
				url: 'cartlist',
				data: {
					uid: uni.getStorageSync('userInfo').uid
				}
			}).then(res => {
				if (res.list == null) {
					this.buffer = false;
				} else {
					this.buffer = true;
					res.list.forEach(item => {
						item.isTrue = false;
					});
					// console.log(res.list);
					this.cartList = res.list;
				}

				let num = 0;
				for (var i = 0; i < this.cartList.length; i++) {
					num++;
				}
				//动态设置购物车角标数量
				if (num > 0) {
					uni.setTabBarBadge({
						index: 2,
						text: num.toString()
					});
				} else {
					uni.removeTabBarBadge({
						index: 2
					});
				}
			});
		}
	},
	computed: {
		sum() {
			let sum = 0;
			this.cartList.forEach(item => {
				if (item.isTrue) {
					sum += item.price;
				}
			});
			return sum;
		},
		num() {
			let num = 0;
			this.cartList.forEach(item => {
				if (item.isTrue) {
					num += item.num;
				}
			});

			return num;
		}
	},
	methods: {
		changeNum(e) {
			// console.log(e.target.dataset.index);
			// console.log(e.currentTarget.id);
			let id = e.currentTarget.id;
			let index = e.target.dataset.index;
			//1是减 2是加
			let good = this.cartList.find(item => {
				return item.id == id;
			});
			if (index == 1) {
				//减
				if (good.num > 1) {
					this.$http({
						url: 'cartedit',
						method: 'post',
						data: {
							type: 1,
							id: id
						}
					}).then(res => {
						if (good.num > 1) {
							good.num--;
						}
					});
				}
			} else {
				//加
				this.$http({
					url: 'cartedit',
					method: 'post',
					data: {
						type: 2,
						id: id
					}
				}).then(res => {
					good.num++;
				});
			}
		},
		changeAll() {
			//小复选框跟着全选框
			this.checkAll = !this.checkAll;
			this.cartList.forEach(item => {
				item.isTrue = this.checkAll;
			});
		},
		checkOne(e) {
			// console.log(e.currentTarget.dataset.index);
			let index = e.currentTarget.dataset.index;
			this.cartList[index].isTrue = !this.cartList[index].isTrue;
			//每次点击小复选框时 循环判断数组中其他小复选框是否被选中 若所有都被选中 则将true返回给全选按扭
			this.checkAll = this.cartList.every(item => {
				return item.isTrue;
			});
		},
		del(e) {
			let index = e.currentTarget.dataset.index;
			let id = e.currentTarget.id;
			console.log(id);
			this.$http({
				url: 'cartdelete',
				method: 'post',
				data: {
					id
				}
			}).then(res => {
				if (res.code == 200) {
					this.$tip.tip(res.msg);
					//再手动将数组里这项数组删除
					this.cartList.splice(index, 1);
					//再次调用此方法 循环查看每个小复选框是否被选中
					// this.checkOne(e);
					// console.log(this.checkOne);
				}
				if (this.cartList.length == 0) {
					this.buffer = false;
				}
			});
		},
		submit() {
			let goods = this.cartList.filter(item => {
				return item.isTrue == true;
			});
			this.payList = goods;
			if (this.payList.length == 0) {
				this.$tip.tip('请添加商品再结算！');
			} else {
				//同时将数据存在本地
				uni.setStorageSync('goods', JSON.stringify(goods));

				let ids = goods.map(item => {
					return item.id;
				});
				ids = ids.join(',');
				// console.log(this.sum, this.num, ids);
				let params = {
					sum: this.sum,
					num: this.num,
					ids: ids
				};
				uni.setStorageSync('goodsParams', params);
				uni.navigateTo({
					url: '../order/order'
				});
			}
		}
	}
};
</script>

<style scoped>
/* 引入样式文件 */
@import url('@/static/css/cart.css');
</style>
